<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.player.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">MuiPlayer视频播放插件</h1>
		</header>
		<div class="mui-content">
			<div id="videoBox"></div>
		</div>
	</body>
	
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.player.min.js"></script>
	
	<script type="text/javascript">
		var duration = 0; // 视频总时长
		mui.init();
		
		var mp = new MuiPlayer({
		    container: '#videoBox',
		    title: '视频标题',
		    src: 'http://sinosoftcompany.f3322.net:8015/upload/video/v1.mp4'
		});
		
		// 监听播放器已创建完成
		mp.on('ready',function(event) {
			console.log('ready --- ')
		    console.log(event);
			console.log('\n')
			setTimeout(function(){
				document.querySelector('video').currentTime = duration * 0.3;
			}, 1000);
			// 视频播放监听
			document.querySelector("._play svg").addEventListener("tap", function() {
				console.log('开始播放');
				
				// document.querySelector('#progress-play').style.width = '50%';
				console.log('paly dispaly -> ' + document.querySelector('._play').style.display);   //block
				console.log('pause display -> ' + document.querySelector('._pause').style.display); //none
			}, false);
			
			// 视频暂停监听
			document.querySelector("._pause svg").addEventListener("tap", function() {
				console.log('暂停播放');
				var progressPlay = document.querySelector('#progress-play').style.width;
				console.log('paly dispaly -> ' + document.querySelector('._play').style.display);   //none
				console.log('pause display -> ' + document.querySelector('._pause').style.display); //block
				console.log('播放进度：' + progressPlay);										    //3.72094%
				console.log('播放进度：' + (parseFloat(progressPlay) / 100 * duration));			    //2.1632056784s
			}, false);
		});
		
		// 当视频时长已更改时触发，只有当时长大于1时发生，单位为秒（s）  可用于获取视频总时长
		mp.on('duration-change',function(event) {
			duration = event.duration
		});
		
		// 当用户在视频寻址时触发
		mp.on('seek-progress',function(event) {
			console.log('seek-progress --- ')
		    console.log(event);
			console.log('progress paly -> ' + document.querySelector('#progress-play').style.width)
			console.log('\n')
		});
	</script>
</html>
